<template>
  <div class="productSelection">
    <!-- 新增装饰件选择 -->
    <TopFilter ref="TopFilterss" :list="topFilterList" :cols="3" labelWidth="90" @filterChange="changeHandle" />

    <div style="margin-top: 15px;"></div>
    <FilterTable
      ref="table"
      :onRowSelectChange="selectChange"
      selectionType="single"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
    />

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button :disabled="this.isChoice" type="primary" @click="saveDialog">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { projectInfoMainData } from '@/api/part/qualityManagement/decorationDispatchOrder';
export default {
  name: 'productSelection',
  props: {
    modifyType: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      topFilterList: this.createTopFilters(), // 搜索数据
      columns: this.createTableColumns(), // table数据
      fetchApi: projectInfoMainData,
      fetchParams: {},
      selectedRows: [], // 选中列表中的行
      isChoice: true // 按钮是否可以选择
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {},
    selectChange(rows) {
      // 选中时触发的函数
      this.selectedRows = rows;
      this.isChoice = this.selectedRows.length > 0 ? false : true;
    },
    createTopFilters() {
      return [
        {
          type: 'INPUT',
          label: '装饰项目代码',
          fieldName: 'proCode',
          placeholder: '请输入...'
        }
      ];
    },

    changeHandle(val) {
      this.fetchParams = { ...val };
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },

        {
          title: '装饰项目代码',
          dataIndex: 'proCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '装饰项目名称',
          dataIndex: 'proName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时费',
          dataIndex: 'manhaurFee',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '装饰项目说明',
          dataIndex: 'remark',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    closeDialog(param) {
      // 取消
      this.$emit('close3', false, param);
    },
    saveDialog() {
      // 保存
      // console.log(this.selectedRows)
      if (this.selectedRows.length > 0) {
        this.$emit('close2', false, this.selectedRows);
      }
    }
  }
};
</script>

<style scoped="scoped" lang="less"></style>
